<script setup>
import { ref, onMounted } from "vue";

const props = defineProps({
  rowData: {
    type: Object,
    default: () => ({}),
  },
});

const emit = defineEmits(["close", "confirm"]);
// 提交表单
const submitForm = () => {
  const submitData = {
    ...form.value,
    allowTakeOut: form.value.allowTakeOut ? 1 : 0,
    immediateDelivery: form.value.immediateDelivery ? 1 : 0,
    allowReserveDelivery: form.value.allowReserveDelivery ? 1 : 0,
    allowPickup: form.value.allowPickup ? 1 : 0,
    autoAcceptOrder: form.value.autoAcceptOrder ? 1 : 0,
    cashOnDelivery: form.value.cashOnDelivery ? 1 : 0,
  };
  emit("confirm", submitData);
};

// 表单数据
const form = ref({
  id: props.rowData.id || "",
  storeName: props.rowData.storeName || "",
  allowTakeOut: props.rowData.allowTakeOut === 1 || false,
  immediateDelivery: props.rowData.immediateDelivery === 1 || false,
  allowReserveDelivery: props.rowData.allowReserveDelivery === 1 || false,
  allowPickup: props.rowData.allowPickup === 1 || false,
  autoAcceptOrder: props.rowData.autoAcceptOrder === 1 || false,
  cashOnDelivery: props.rowData.cashOnDelivery === 1 || false,

  deliveryType: props.rowData.deliveryType || 1,
  orderTimeRange: props.rowData.orderTimeRange || "00:00-00:00",
  deliveryPickupTimeRange:
    props.rowData.deliveryPickupTimeRange || "00:00-00:00",
});

// 时间范围选择器
const orderTimeRange = ref([]);
const deliveryPickupTimeRange = ref([]);

// 初始化时间选择器
const initTimeRange = () => {
  // 初始化可下单时间段
  if (form.value.orderTimeRange) {
    const [start, end] = form.value.orderTimeRange.split("-");
    const [startHour, startMinute] = start.split(":");
    const [endHour, endMinute] = end.split(":");

    orderTimeRange.value = [
      new Date(0, 0, 0, parseInt(startHour), parseInt(startMinute)),
      new Date(0, 0, 0, parseInt(endHour), parseInt(endMinute)),
    ];
  } else {
    orderTimeRange.value = [new Date(0, 0, 0, 8, 0), new Date(0, 0, 0, 22, 0)];
  }

  // 初始化可自提时间段
  if (form.value.deliveryPickupTimeRange) {
    const [start, end] = form.value.deliveryPickupTimeRange.split("-");
    const [startHour, startMinute] = start.split(":");
    const [endHour, endMinute] = end.split(":");

    deliveryPickupTimeRange.value = [
      new Date(0, 0, 0, parseInt(startHour), parseInt(startMinute)),
      new Date(0, 0, 0, parseInt(endHour), parseInt(endMinute)),
    ];
  } else {
    deliveryPickupTimeRange.value = [
      new Date(0, 0, 0, 10, 0),
      new Date(0, 0, 0, 20, 0),
    ];
  }
};

// 处理时间选择变化
const handleOrderTimeChange = (val) => {
  if (val && val.length === 2) {
    form.value.orderTimeRange =
      `${val[0].getHours().toString().padStart(2, "0")}:${val[0]
        .getMinutes()
        .toString()
        .padStart(2, "0")}-` +
      `${val[1].getHours().toString().padStart(2, "0")}:${val[1]
        .getMinutes()
        .toString()
        .padStart(2, "0")}`;
  }
};

const handlePickupTimeChange = (val) => {
  if (val && val.length === 2) {
    form.value.deliveryPickupTimeRange =
      `${val[0].getHours().toString().padStart(2, "0")}:${val[0]
        .getMinutes()
        .toString()
        .padStart(2, "0")}-` +
      `${val[1].getHours().toString().padStart(2, "0")}:${val[1]
        .getMinutes()
        .toString()
        .padStart(2, "0")}`;
  }
};

// 初始化
onMounted(() => {
  initTimeRange();
});
</script>

<template>
  <el-dialog
    title="外卖设置编辑"
    width="50%"
    :model-value="true"
    @close="emit('close')"
  >
    <el-form :model="form" label-width="120px">
      <el-form-item label="店铺名称">
        <el-input v-model="form.storeName" disabled />
      </el-form-item>

      <el-form-item label="开启外卖">
        <el-switch
          v-model="form.allowTakeOut"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>

      <el-form-item label="可下单时间段" v-if="form.allowTakeOut">
        <el-time-picker
          v-model="orderTimeRange"
          is-range
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          format="HH:mm"
          @change="handleOrderTimeChange"
        />
        <div style="margin-top: 8px; color: #666">
          当前设置: {{ form.orderTimeRange }}
        </div>
      </el-form-item>

      <el-form-item label="可自提时间段" v-if="form.allowTakeOut">
        <el-time-picker
          v-model="deliveryPickupTimeRange"
          is-range
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
          format="HH:mm"
          @change="handlePickupTimeChange"
        />
        <div style="margin-top: 8px; color: #666">
          当前设置: {{ form.deliveryPickupTimeRange }}
        </div>
      </el-form-item>

      <el-form-item label="立即配送" v-if="form.allowTakeOut">
        <el-switch
          v-model="form.immediateDelivery"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="预约配送" v-if="form.allowTakeOut">
        <el-switch
          v-model="form.allowReserveDelivery"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="到店自提" v-if="form.allowTakeOut">
        <el-switch
          v-model="form.allowPickup"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="自动接单" v-if="form.allowTakeOut">
        <el-switch
          v-model="form.autoAcceptOrder"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-form-item label="货到付款" v-if="form.allowTakeOut">
        <el-switch
          v-model="form.cashOnDelivery"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <el-button @click="emit('close')">取消</el-button>
      <el-button type="primary" @click="submitForm">确认</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>
.el-select,
.el-input,
.el-input-number {
  width: 100%;
}
</style>
